<template>
  <div>
    <el-row justify="center">
     <h1>供应商管理</h1>
    </el-row>
    <el-row  >
      <el-col :span="22">

        <div style="display: flex;justify-content: space-around ">
          <el-button type="primary" @click="this.showAdd=true">添加供应商</el-button>
          <el-form-item label="供应商名称" style="width: 250px" >
            <el-input clearable v-model="paramObj.name"/>
          </el-form-item>
          <el-form-item label="经营范围" style="width: 250px">
            <el-input  clearable v-model="paramObj.ranges"/>
          </el-form-item>
          <el-button @click="findByItem(1)" type="primary">查询</el-button>

        </div>
        <el-table :data="cutObj.records" style="width: 100%;margin-bottom: 20px " border stripe>
          <el-table-column prop="name" label="供应商名称"/>
          <el-table-column prop="headerName" label="负责人"/>
          <el-table-column prop="ranges" label="经营范围"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="findById(scope.row.id)">查询</el-button>
              <el-button type="primary" @click="findByIdu(scope.row.id)">修改信息</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="this.cutObj.total"
            @current-change="findByItem"
        />

        <div style="margin-top: 20px">
          供应商Excel：<input type="file" id="myFile">
          <input type="button" value="添加" @click="upFile">
        </div>
        <!--    个人信息弹出框    -->
        <el-dialog
            v-model="showInfo"
            title="供应商详情信息" center>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 200px">
            <el-form-item label="供应商名称">
              {{ vendorObj.name }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 200px">
            <el-form-item label="负责人">
              {{ vendorObj.headerName }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 200px">
            <el-form-item label="负责人电话 ">
              {{ vendorObj.headerPhone }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 200px">
            <el-form-item label="办公地址">
              {{ vendorObj.address }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 200px">
            <el-form-item label="经营范围 ">
              {{ vendorObj.ranges }}
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="showInfo = false">
          确定
        </el-button>
      </span>
          </template>
        </el-dialog>
        <!--   修改弹出框    -->
        <el-dialog
            v-model="showUpdate"
            title="供应商详情信息" center>
          <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-left: 200px">
            <el-form-item label="供应商名称">
              {{ updateObj.name }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-left: 200px"  >
            <el-form-item label="负责人">
              <el-input v-model="updateObj.headerName" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-left: 200px">
            <el-form-item label="负责人电话 ">
              <el-input v-model="updateObj.headerPhone" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-left: 200px"    >
            <el-form-item label="办公地址" >
              {{ updateObj.address }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-left: 200px">
            <el-form-item label="经营范围 ">
              {{ updateObj.ranges }}
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="update">
         修改
        </el-button>
      </span>
          </template>
        </el-dialog>
        <!--添加-->
        <el-dialog
            v-model="showAdd"
            title="添加供应商" center   @close="clean">
          <el-form :inline="true"
                   :model="addObj"
                   :rules="rules"
                   label-width="120px"
                   class="demo-ruleForm"
                   status-icon
                   ref="addA"
          >
            <el-form-item label="供应商名称" prop="name">
              <el-input v-model="addObj.name" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true"
                   :model="addObj"
                   :rules="rules"
                   label-width="120px"
                   class="demo-ruleForm"
                   ref="addB"
                   status-icon>
            <el-form-item label="负责人" prop="headerName">
              <el-input v-model="addObj.headerName" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true"
                   :model="addObj"
                   :rules="rules"
                   label-width="120px"
                   class="demo-ruleForm"
                   ref="addC"
                   status-icon>
            <el-form-item label="负责人电话 " prop="headerPhone">
              <el-input v-model="addObj.headerPhone" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true"
                   :model="addObj"
                   :rules="rules"
                   label-width="120px"
                   class="demo-ruleForm"
                   ref="addD"
                   status-icon>
            <el-form-item label="办公地址" prop="address">
              <el-input v-model="addObj.address" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true"
                   :model="addObj"
                   :rules="rules"
                   label-width="120px"
                   class="demo-ruleForm"
                   ref="addE"
                   status-icon>
            <el-form-item label="经营范围 " prop="ranges">
              <el-input v-model="addObj.ranges" clearable></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="add">
         添加
        </el-button>
      </span>
          </template>
        </el-dialog>

      </el-col>
    </el-row>


  </div>


</template>
<script>
import axios from "axios"
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      cutObj: {},
      currentPage: '',
      pageSize: 5,
      paramObj: {},
      showInfo: false,
      vendorObj: {},
      formInline: "",
      showUpdate: false,
      form: "",
      updateObj: {},
      addObj: {},
      showAdd: false,
      f: "",
      errorAddInfo:"",
      rules:{
        name:[{required: true, message: '供应商名称不能为空', trigger: 'blur'}],
        headerName:[{required: true, message: '负责人不能为空', trigger: 'blur'}],
        headerPhone:[{required: true, message: '负责人电话不能为空', trigger: 'blur'}],
        address:[{required: true, message: '办公地址不能为空', trigger: 'blur'}],
        ranges:[{required: true, message: '经营范围不能为空', trigger: 'blur'}]
      }


    }
  }, methods: {
    clean(){
      this.$refs.addA.resetFields();
      this.$refs.addB.resetFields();
      this.$refs.addC.resetFields();
      this.$refs.addD.resetFields();
      this.$refs.addE.resetFields();

    },
    findByItem(pageNO) {
      this.currentPage = pageNO;
      this.paramObj.pageNO = pageNO;
      axios.get('/project/vendor/findByItem', {params: this.paramObj}).then(resp => {
        this.cutObj = resp.data;
      })

    },
    findById(id) {
      axios.get('/project/vendor/findById', {params: {vendorId: id}}).then(resp => {
        this.showInfo = true;
        this.vendorObj = resp.data;
      })
    },
    update() {
      axios.get("/project/vendor/updateVendor", {
        params: {
          headerName: this.updateObj.headerName,
          headerPhone: this.updateObj.headerPhone,
          vendorId: this.updateObj.id
        }
      }).then(resp => {
        let info = resp.data;
        if (info == "ok") {
          this.findByItem(1);
          this.showUpdate = false;
        }
      })

    },
    findByIdu(id) {
      axios.get('/project/vendor/findById', {params: {vendorId: id}}).then(resp => {
        this.showUpdate = true;
        this.updateObj = resp.data;
      })
    },
    add() {
      axios.get('/project/vendor/add', {params: this.addObj}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
          this.clean();
          this.showAdd = false;
        }

      })
    },upFile(){
      var formObj = new FormData;
      formObj.append("excelFile",document.getElementById("myFile").files[0]);
      let config = {
        headers:{'Content-Type':'multipart/form-data'}
      }
      axios.post("/project/excel/add",formObj,config).then(resp =>{
        if (resp.data == "ok"){
          ElMessage({type:"success",
          message:"上传成功"
          })
        this.findByItem(1);

        }
      })

    }
   },
  created() {

    this.findByItem(1);

  }
}
</script>

<style scoped>

</style>